<script>
import persistence from "@/store/persistence"

export default {
  name: "setting",
  methods: {
    open() {
      this.$refs["setting-popup"].open()
    },
    //更改了字体大小
    handleFontSettingChange(item) {
      persistence.practiceSettings.setItem("fontSizeRate", item.value)
      this.root.globalCssVariables.fontSizeRate = item.value
      this.currentSelectedFontSize = item.value
    },
  },
  data() {
    return {
      fontSizeOptionList: [
        {
          label: "极小",
          value: 0.5,
        },
        {
          label: "小",
          value: 0.8,
        },
        {
          label: "普通",
          value: 1,
        },
        {
          label: "大",
          value: 1.3,
        },
      ],
      currentSelectedFontSize: persistence.practiceSettings.getItem("fontSizeRate") || 1, // 当前选中的字体大小
    }
  },
  inject: ["root"],
}
</script>

<template>
  <view class="component">
    <uni-popup ref="setting-popup" type="bottom">
      <view class="content">
        <view class="setting-item">
          <view class="label">字体大小</view>
          <view class="value">
            <view class="radio-list">
              <view
                v-for="item in fontSizeOptionList"
                :key="item.label"
                @click="handleFontSettingChange(item)"
                class="radio-button-item"
                :class="{ active: currentSelectedFontSize === item.value }"
                >{{ item.label }}</view
              >
            </view>
          </view>
        </view>
<!--				<div class="setting-item">-->
<!--					<view class="label">夜间模式</view>-->
<!--					<view class="value">-->
<!--						<switch class="switch"></switch>-->
<!--					</view>-->
<!--				</div>-->
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.component {
  .content {
    background: white;
    border-radius: 20rpx 20rpx 0 0;
    overflow: hidden;
    border: 2rpx solid #f0f0f0;
    padding: 40rpx 20rpx;
    .setting-item {
      padding: 20rpx;
      border-bottom: 2rpx solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .label {
        font-size: calc(30rpx * var(--font-size-rate));
      }
      .value {
        .radio-list {
          display: flex;
          border-radius: 20rpx;
          overflow: hidden;
          .radio-button-item {
            padding: 12rpx 24rpx;
            background: #f0f0f0;
            font-size: calc(30rpx * var(--font-size-rate));
            &:not(:last-child) {
              margin-right: 6rpx;
            }
            &.active {
              background: var(--theme-color);
							color: var(--text-color-white);
            }
          }
        }
				.switch {
					transform:scale(0.8);
				}
      }
    }
  }
}
</style>
